<template>
    <div class="main-content">
        <header class="header_enlogin">
            <div class="center_head">
                <div class="center">
                    <p class="tip-text" :style="{ fontSize: getSize }">
                        {{ dataList[0]?.ledHint }}
                    </p>
                </div>
            </div>
        </header>
        <div class="mainDiv">
            <div class="box_cent">
                <div class="login_content">
                    <div class="login_title">
                        <div
                            class="item-col"
                            v-for="(item, index) in dataColumns"
                            :key="index"
                            :style="{ width: item.width + '%', textAlign: item.align || 'left' }"
                        >
                            {{ item.title }}
                        </div>
                    </div>
                    <div class="content">
                        <Vue3SeamlessScroll
                            v-model="isScroll"
                            class="scroll-wrap"
                            :list="dataList"
                            :step="0.8"
                            :limitScrollNum="5"
                            direction="up"
                            :wheel="true"
                            :hover="true"
                        >
                            <div class="item" v-for="(item, i) of dataList" :key="i">
                                <div class="item_content">
                                    <div
                                        class="item-col"
                                        v-for="(col, index) in dataColumns"
                                        :key="index"
                                        :style="{
                                            width: col.width + '%',
                                            textAlign: col.align || 'left',
                                        }"
                                    >
                                        {{ item[col.dataIndex] }}
                                    </div>
                                </div>
                            </div>
                        </Vue3SeamlessScroll>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import dayjs from 'dayjs';
import { computed, onMounted, onUnmounted, ref } from 'vue';
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';

import { getXygData } from '@/api/template';
const isScroll = ref(false);
const dataColumns: any = [
    {
        title: '集装箱号',
        dataIndex: 'containerId',
        width: 22,
        ellipsis: false,
        align: 'center',
    },
    {
        title: '处理结果',
        dataIndex: 'checkResult',
        width: 15,
        ellipsis: false,
        align: 'center',
    },
    {
        title: 'LED显示内容',
        dataIndex: 'ledHint',
        width: 38,
        ellipsis: false,
        align: 'center',
    },
    {
        title: '反馈时间',
        dataIndex: 'feedbackTime',
        width: 25,
        ellipsis: false,
        align: 'center',
    },
];

const dataList: any = ref([]);
const getSize = computed(() => {
    let size = 300;
    if (dataList.value[0]?.ledHint.length > 14) {
        size = 250;
    }
    if (dataList.value[0]?.ledHint.length > 20) {
        size = 210;
    }
    return size + 'px';
});
const getResult = (str: string) => {
    let result = '';
    switch (str) {
        case 'Y':
            result = '放行';
            break;
        case 'N':
            result = '报警';
            break;
        case 'M ':
            result = '待人工确认';
            break;
        default:
            result = '--';
            break;
    }
    return result;
};
const fetchData = async () => {
    try {
        const fetchData = await getXygData();
        // const fetchData = {
        //     data: [
        //         {
        //             feedbackTime: '2024-09-30 12:35',
        //             checkResult: 'Y',
        //             licenseNo: '',
        //             containerId: 'OOLU-3796033-22G1',
        //             ledHint: '请过海关H986机检，再前往2号平台asfdafsdfdafda',
        //         },
        //     ],
        // };
        if (fetchData.data.length > 0) {
            dataList.value = fetchData.data.map((item: any) => {
                return {
                    feedbackTime: dayjs(item.feedbackTime).format('YYYY-MM-DD HH:mm:ss'),
                    checkResult: getResult(item.checkResult),
                    licenseNo: item.licenseNo ? item.licenseNo : '--',
                    ledHint: item.ledHint ? item.ledHint : '--',
                    containerId: item.containerId ? item.containerId : '--',
                };
            });
        }
    } catch (error) {
        console.log('fetchData error', error);
    }
};
const fetchInterval = () => {
    fetchData();
};
const fetchIntervalId = window.setInterval(fetchInterval, 3000);
onMounted(() => {
    fetchData();
});
onUnmounted(() => {
    window.clearInterval(fetchIntervalId);
});
</script>
<style lang="less" scoped>
.main-content {
    width: 100%;
    height: 100%;
    background-color: #000;
    display: flex;
    flex-direction: column;
}

.header_enlogin {
    flex: 1;
    display: flex;
    flex-direction: column;
    // text-align: center;
}
.center_head {
    font-size: 290px;
    font-weight: bold;
    color: #f29100;
    .tip {
        margin: 0;
        padding: 20px 0px;
        text-align: center;
    }
    .tip-text {
        color: #00ff00;
        word-break: break-all;
        word-wrap: break-word;
        margin: 0;
        padding: 40px 20px;
        padding: 10px;
    }
}
.mainDiv {
    width: 100%;
    display: flex; /*父元素设置flex属性*/
    justify-content: center; /*水平主轴居中*/
    align-items: center; /*垂直交叉轴居中*/
    margin-top: 20px;
}
.box_cent {
    width: 100%;
}
.login_content {
    box-sizing: border-box;
    box-shadow: #cde1fd 0px 5px 8px;
    overflow: hidden;
    .content {
        width: 100%;
        overflow: hidden;
        .item_content {
            display: flex;
            align-items: center;
            padding: 10px 0px;
            height: 30px;
            line-height: 30px;
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
            font-size: 23px;
            font-weight: bold;
            border: 1px solid #0c3d65;
            color: #fff;
            .item-col {
                padding: 0 8px;
                margin-bottom: 2px;
            }
        }
    }
}
.login_title {
    height: 40px;
    line-height: 40px;
    font-size: 30px;
    font-weight: bold;
    display: flex;
    width: 100%;
    align-items: center;
    background: #001a74;
    color: #fff;
    // background: #fff;
    .item-col {
        // color: #0c3d65;
        padding: 0 8px;
        margin-bottom: 2px;
    }
}
.pass_color {
    color: #00ff00;
}
.error_color {
    color: #fa3534;
}
</style>
